<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        :rules="rules"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;">

        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryForm.customerName" style="width: 100px;"/>
        </el-form-item>

        <el-form-item label="客户编号" prop="customerSerialnumber">
          <el-input v-model="queryForm.customerSerialnumber" style="width: 100px;"/>
        </el-form-item>

        <el-form-item label="用能类型" prop="customerType">
          <el-select v-model="queryForm.customerType" style="width: 100px;">
            <el-option label="居民 使用" value="0"/>
            <el-option label="商业 使用" value="1"/>
            <el-option label="工业 使用" value="2"/>
            <el-option label="农业 使用" value="3"/>
            <el-option label="教育 使用" value="4"/>
            <el-option label="医疗 使用" value="5"/>
            <el-option label="政府及事业单位 使用" value="6"/>
            <el-option label="其他 使用" value="7"/>
          </el-select>
        </el-form-item>

        <el-form-item label="统计周期" prop="cycle">
          <el-select v-model="queryForm.cycle" style="width: 100px;" @change="onCycleChange">
            <el-option label="月" value="1"/>
            <el-option label="季" value="2"/>
            <el-option label="年" value="3"/>
          </el-select>
        </el-form-item>

        <el-form-item :label="'选择'+getCycleName()" prop="date">
          <el-date-picker v-model="queryForm.date" style="width: 110px;" type="month" value-format="yyyy-MM" v-if="queryForm.cycle=='1'"/>
          <el-select v-model="queryForm.date" style="width: 110px;" v-if="queryForm.cycle=='2'">
            <el-option label="第一季度" value="0"/>
            <el-option label="第二季度" value="1"/>
            <el-option label="第三季度" value="2"/>
            <el-option label="第四季度" value="3"/>
          </el-select>
          <el-date-picker v-model="queryForm.date" style="width: 110px;" type="year" value-format="yyyy"  v-if="queryForm.cycle=='3'"/>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleFormSubmit">
            <d2-icon name="search"/>
            查询
          </el-button>
          <el-button
            type="primary"
            @click="viewChart">
            <d2-icon name="bar-chart"/>
            查看图表
          </el-button>
        </el-form-item>

      </el-form>
    </template>
    <split-pane :min-percent='10' :max-percent='20' :default-percent='20' split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="onPageChange">
        </d2-crud>
      </template>
    </split-pane>
    <el-dialog
      :visible.sync="dialogVisible">
        <ve-histogram :data="chartData" :settings="chartSetting"></ve-histogram>
    </el-dialog>
  </d2-container>
</template>

<script>
  import MyAreaTree from "@/components/my-area-tree";
  import dayjs from 'dayjs';
  import VeHistogram from 'v-charts/lib/histogram'

  export default {
    name: 'tongbi',
    components: {MyAreaTree,VeHistogram},
    data () {
      return {
        queryForm: {
          areaId: '1',
          customerName: '',
          customerSerialnumber: '',
          customerType: '0',
          cycle: '1',
          date: dayjs().format('YYYY-MM'),
        },
        rules: {
          cycle: [ { required: true, message: '必填', trigger: 'blur' } ],
          date: [ { required: true, message: '必填', trigger: 'blur' } ],
        },
        loading: false,
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        columns:  [
          {
            "title": "序号",
            "key": "serialNum",
            "sort": true
          },
          {
            "title": "区域名称",
            "key": "areaName",
            "sort": true
          },
          {
            "title": "客户名称",
            "key": "customerName",
            "sort": true
          },
          {
            "title": "客户编号",
            "key": "customerSerialnumber",
            "sort": true
          },
          {
            "title": "时间",
            "key": "date",
            "sort": true
          },
          {
            "title": "用量",
            "key": "dosage",
            "sort": false
          },
          {
            "title": "同比日期",
            "key": "lastYearDate",
            "sort": true
          },
          {
            "title": "同比用量",
            "key": "lastYearDosage",
            "sort": false
          }
        ],
        data: [
        ],
        dialogVisible: false,
        chartData: null,
        chartSetting: {
          labelMap: {
            datetime: '时间',
            value: '用量'
          },
        }
      }
    },
  mounted () {
    this.fetchData()
  },
    methods: {
      getCycleName() {
        switch (this.queryForm.cycle) {
          case '1': return '月';
          case '2': return '季';
          case '3': return '年';
          default: return '日期'
        }
      },
      onAreaChange(data, node) {
        console.log(data, node);
        this.queryForm.areaId = data.id;
        this.fetchData();
      },
      onCycleChange() {
        this.queryForm.date = '';
      },
      handleFormSubmit () {
        this.$refs.queryForm.validate((valid) => {
          if (valid) {
            this.fetchData();
          } else {
            return false
          }
        })
      },
      fetchData() {
        this.loading = true;
        this.$api.admin_yearOnYear_getStatisticsPageVO({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          ...this.queryForm,
        }).then(res => {
          this.data = res.data;
          this.pagination.total = res.total
        }).catch(err => {
          console.log('err', err)
        }).finally(() => {
          this.loading = false
        })
      },

      onPageChange(currentPage) {
        this.pagination.currentPage = currentPage
        this.fetchData()
      },
      viewChart() {
        this.dialogVisible = true;
        this.$api.admin_yearOnYear_getStatisticsChartVO({...this.queryForm}).then(res=>{
          this.chartData = {
            columns: ['datetime','value'],
            rows: res
          };
        })
      }
    }
  }
</script>
